<template>
    <el-dialog v-model="dialogVisible"   :title="`${formLabelAlign.id ? '修改' :'新增'}`" width="30%">
        <el-form  label-position="right" label-width="100" :inline="true" ref="ruleFormRef" :model="formLabelAlign" class="demo-form-inline">
            <el-form-item :rules="[
                {
                    required: true,
                    message: '专项扣除类别不能为空',
                    trigger: 'blur',
                },
            ]" prop="status"  label="类别">
                <el-select  clearable v-model="formLabelAlign.status" placeholder="请选择用户类型">
                    <el-option v-for="(item,index) of eductionList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item :rules="[
                {
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur',
                },
            ]" prop="name" label="名称">
                <el-input v-model="formLabelAlign.name" placeholder="请输入名称" />
            </el-form-item>

            <el-form-item prop="description" label="描述">
                <el-input v-model="formLabelAlign.description" placeholder="请输入描述" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { postAdddeduction } from '@/api/api'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { eduction } from '@/utils';
const eductionList = ref(eduction)
const emit = defineEmits(['onsuccess'])

const ruleFormRef = ref(null)

const dialogVisible = ref(false)
const formLabelAlign = reactive({
    id: 0,
    name: '',
    status:'',
    description: '',
    amount:0
})
const addFormFn = (obj)=> {
    if (obj) {
        formLabelAlign.id = obj.id
        formLabelAlign.name = obj.name
        formLabelAlign.status = obj.status
        formLabelAlign.description = obj.description
    }else{
        formLabelAlign.id = 0
    }
   
}

//把数据导出
defineExpose({
    addFormFn,
    dialogVisible,
})
const submitForm = async formEl => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (!formLabelAlign.id) delete formLabelAlign.id
            if (!formLabelAlign.description) delete formLabelAlign.description
            await postAdddeduction({
                ...formLabelAlign
            })
            ElMessage.success('保存成功！')
            dialogVisible.value = false
            emit('onsuccess')
        } else {
            console.info(fields)
            ElMessage.error('请查看您填写的参数是否正确！')
        }
    })
}


</script>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
